// HealthSummaryScreen.js
import React, {useRef} from 'react';
import {View, Text, Button, StyleSheet, ScrollView} from 'react-native';
import { TouchableOpacity } from 'react-native-gesture-handler'; // 假设你用到了这个组件库

const HealthSummaryScreen = ({ navigation }) => {
    // 新建一个函数，定义每个统计项目的颜色和名称
    const summaryItems = [
        { color: '#f2b751', name: 'Sleep Summary', ToIndex: 'Second'},
        { color: '#d3dff6', name: 'Activity Summary', ToIndex: ''},
        { color: '#fdb8cf', name: 'Heart Rate Summary', ToIndex: ''},
        { color: '#99fd92', name: 'Blood Oxygen Summary', ToIndex: ''},
        { color: '#97cbf4', name: 'Emotional & Stress Summary', ToIndex: ''},
        { color: '#efc4a6', name: 'Pain Summary', ToIndex: ''},
        { color: '#b494f1', name: 'Medication & Side Effects Summary', ToIndex: ''},
        { color: '#a59fa2', name: '...............', ToIndex: ''},
        { color: '#a59fa2', name: '...............', ToIndex: ''},
        { color: '#a59fa2', name: '...............', ToIndex: ''},
        { color: '#a59fa2', name: '...............', ToIndex: ''},
        { color: '#a59fa2', name: '...............', ToIndex: ''},
    ];

    const scrollViewRef = useRef(null);

    return (
        <View style={styles.container}>
            <ScrollView ref={scrollViewRef}>
                <Text style={styles.title}>Health Summary</Text>

                {summaryItems.map((item, index) => (
                    <TouchableOpacity
                        key={index}
                        style={[styles.summaryCard, { backgroundColor: item.color }]}
                        onPress={() => navigation.navigate(item.ToIndex.replace(/\s+/g, ''))}
                    >
                        <Text style={styles.summaryText}>{item.name}</Text>
                    </TouchableOpacity>
                ))}

                <Button
                    title="Settings"
                    onPress={() => navigation.navigate('Settings')}
                />
            </ScrollView>
        </View>
    );
};

const styles = StyleSheet.create({
    container: {
        flex: 1,
    },
    title: {
        fontSize: 24,
        fontWeight: 'bold',
        marginBottom: 16,
    },
    summaryCard: {
        padding: 20,
        marginHorizontal: '2%',
        marginVertical: 5,
        width: '96%',
        borderRadius: 10,
    },
    summaryText: {
        fontSize: 18,
        marginLeft: '2%',
    },
});

export default HealthSummaryScreen;
